<!--
 * @Date: 2021-10-14 09:37:12
 * @Author: 陶子
 * @LastEditTime: 2022-03-30 14:23:13
 * @FilePath: \jk_one-stop_pc\src\views\managementSettings\haveThreeClass.vue
 * @pageName: 这是--(含有三级分类的)--页面

-->
<template>
  <div class="wrap">
    <div class="btnBox">
      <a-button style="margin-right:10px" @click="showResetModal"> 恢复初始化设置 </a-button>
      <a-button type="primary" @click="addBtn('fatherAdd')">+添加一级分类</a-button>
    </div>
    <div class="natiueHeader">
      <div class="headerLeft">字典值</div>
      <div class="headerRight">操作</div>
    </div>
    <div class="scrollBox">
      <draggable v-model="treeData" chosen-class="chosen" force-fallback="true" handle=".fatherDrag" group="fatherGroup" animation="800" @start="onStart('father')"
        @end="onEnd('father')">
        <transition-group type="transition" :name="!dragFather ? 'flip-list' : null">
          <div v-for="(fatherIterm,fatherIndex) in treeData" :key="fatherIterm.key" class="subBox">
            <div class="itemBox">
              <div class="itemLeft">
                <div class="fatherDrag">
                  <img src="~@/assets/img/drag.png" class="dragPng fatherDrag" alt="">
                </div>
                <div class='proBox' v-if="fatherIterm.showChildren" @click='closeItem(fatherIndex)'>
                  <img src="~@/assets/img/pro-up.png" class="closePng" alt="">
                </div>
                <div class='proBox' v-else @click='openItem(fatherIndex)'>
                  <img src="~@/assets/img/pro-down.png" class="opnePng" alt="">
                </div>
                <div class="itemName">{{fatherIterm.title }}</div>
              </div>
              <div class="actionBox">
                <div class="btn-text" @click="editItem(fatherIterm,'fatherEdit')">编辑</div>
                <div class="middleLine"></div>
                <div class="btn-text" @click="showDelete(fatherIterm,'fatherDelete',null)">删除</div>
                <div class="middleLine"></div>
                <div class="btn-text" @click="addBtn('sonAdd',fatherIterm,fatherIndex)">添加下级</div>
              </div>
            </div>
            <draggable v-if="fatherIterm.showChildren" v-model="fatherIterm.children" chosen-class="chosen" force-fallback="true" handle=".sonDrag"
              :group="`${fatherIterm.title}${fatherIterm.key}`" animation="800" @start="onStart('son')" @end="onEnd('son',fatherIndex)">
              <transition-group type="transition" :name="!dragSon ? 'flip-list' : null">
                <div v-for="sonItem in fatherIterm.children" :key='`${sonItem.key}`'>
                  <div class="itemBox itemBox2">
                    <div class="itemLeft">
                      <div class="sonDrag">
                        <img src="~@/assets/img/drag.png" class="dragPng " alt="">
                      </div>
                      <div class="itemName">{{sonItem.title }}</div>
                    </div>
                    <div class="actionBox">
                      <div class="btn-text" @click="editItem(sonItem,'sonEdit',fatherIndex)">编辑</div>
                      <div class="middleLine"></div>
                      <div class="btn-text" @click="showDelete(sonItem,'sonDelete',fatherIndex)">删除</div>
                    </div>
                  </div>
                </div>
              </transition-group>
            </draggable>
          </div>
        </transition-group>
      </draggable>
    </div>
    <a-modal v-model="showDialog" :title="checkActionType" @ok='dialogConfirm'>
      <a-form-model ref="dictForm" :model="dictForm" :rules="rules">
        <a-form-model-item label="分类名称" prop='content'>
          <a-input v-model="dictForm.content" :maxLength="15" style="width:260px" placeholder="请输入" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import draggable from 'vuedraggable'
import {
  getDictTextApi,
  resetPubDictApi,
  addOneClassApi,
  classDictEditApi,
  classDictDeleteApi,
  dictSortApi,
} from '@/api/erpApi'
export default {
  data() {
    return {
      dictForm: {
        content: '',
      },
      rules: {
        content: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      showDialog: false,
      dragFather: false,
      dragSon: false,
      treeData: [], //列表树数据
      itemInfo: {},
      sureBtnType: '', // fatherEdit为一级分类编辑；sonEdit为二级分类编辑；fatherAdd为一级分类新增；sonAdd为二级分类新增
      treeId: '',
      type: '',
      currentIndex: null,
    }
  },
  components: {
    draggable,
  },
  created() {},
  methods: {
    showData(treeId, type) {
      this.treeId = treeId
      this.type = type
      this.getData()
    },
    getData() {
      this.treeData = []
      let obj = {
        id: this.treeId,
        type: this.type,
      }
      getDictTextApi(obj).then((res) => {
        if (res.success) {
          this.treeData = res.result
          if (this.currentIndex || this.currentIndex == 0) {
            this.$nextTick(() => {
              if (this.treeData[this.currentIndex].children) {
                this.treeData[this.currentIndex].showChildren = true
              }
            })
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    checkActionType() {
      let actionStr = ''
      switch (this.sureBtnType) {
        case 'fatherEdit':
          actionStr = '编辑一级分类'
          break
        case 'sonEdit':
          actionStr = '编辑'
          break
        case 'fatherAdd':
          actionStr = '添加一级分类'
          break
        case 'sonAdd':
          actionStr = '添加下级'
          break
      }
      return actionStr
    },
    showResetModal() {
      let that = this
      that.$antdConfirm({
        title: '确定恢复初始化设置吗？',
        content: '恢复初始化设置将清除您所有的自定义配置',
        cancelText: '不恢复',
        okText: '恢复',
        onOk() {
          console.log('这是恢复')
          let resetObj = {
            dictType: 'category',
            id: that.treeId,
          }
          resetPubDictApi(resetObj).then((res) => {
            if (res.success) {
              that.getData()
              that.currentIndex = null
            } else {
              that.$antdMessage.warning(res.message)
            }
          })
        },
      })
    },
    onStart(type) {
      switch (type) {
        case 'father':
          this.dragFather = true
          break
        case 'son':
          this.dragSon = true
          break
      }
    },
    onEnd(type, fatherIndex) {
      let ids = ''
      if (type == 'father') {
        this.dragFather = false
        let str = ''
        for (let item of this.treeData) {
          str += item.key + ','
        }
        ids = str.substring(0, str.length - 1)
      } else {
        this.dragSon = false
        let str = ''
        for (let item of this.treeData[fatherIndex].children) {
          str += item.key + ','
        }
        ids = str.substring(0, str.length - 1)
      }
      let dragObj = {
        ids: ids,
        dictType: 'category',
      }
      dictSortApi(dragObj).then((res) => {
        if (!res.success) {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    showDelete(item, deleteType, fatherIndex) {
      let modalContent = deleteType == 'fatherDelete' ? '删除后将同步删除字典值' : ''
      let that = this
      this.currentIndex = fatherIndex
      that.$antdConfirm({
        title: '确定删除吗？',
        content: modalContent,
        onOk() {
          let deleteObj = {
            id: item.key,
          }
          classDictDeleteApi(deleteObj).then((res) => {
            if (res.code == 200) {
              that.getData()
            } else {
              that.$antdMessage.warning(res.message)
            }
          })
        },
      })
    },

    editItem(item, operationType, fatherIndex) {
      this.itemInfo = item
      console.log('要编辑的内容：', item)
      this.sureBtnType = operationType
      this.dictForm.content = item.title
      this.showDialog = true
      if (fatherIndex || fatherIndex == 0) {
        this.currentIndex = fatherIndex
      }
    },
    addBtn(operationType, fatherIterm, fatherIndex) {
      this.sureBtnType = operationType
      this.dictForm.content = ''
      this.showDialog = true
      if (fatherIterm) {
        this.itemInfo = fatherIterm
      }
      if (fatherIndex || fatherIndex == 0) {
        this.currentIndex = fatherIndex
      }
    },
    dialogConfirm() {
      // 1为新增；2为编辑
      this.$refs.dictForm.validate((valid) => {
        if (valid) {
          console.log(this.dictForm.content)
          if (this.sureBtnType == 'fatherAdd') {
            let addObj = {
              pid: this.treeId,
              name: this.dictForm.content,
            }
            console.log('father新增到了这里了', addObj.sortOrder)
            addOneClassApi(addObj).then((res) => {
              if (res.code == 200) {
                this.getData()
              } else {
                this.$antdMessage.warning(res.message)
              }
            })
          }
          if (this.sureBtnType == 'sonAdd') {
            let addObj = {
              pid: this.itemInfo.key,
              name: this.dictForm.content,
            }
            addOneClassApi(addObj).then((res) => {
              if (res.code == 200) {
                this.getData()
              } else {
                this.$antdMessage.warning(res.message)
              }
            })
          }
          if (this.sureBtnType == 'fatherEdit') {
            let editObj = {
              pid: this.itemInfo.parentId,
              id: this.itemInfo.key,
              name: this.dictForm.content,
            }
            classDictEditApi(editObj).then((res) => {
              if (res.code == 200) {
                this.getData()
              } else {
                this.$antdMessage.warning(res.message)
              }
            })
          }
          if (this.sureBtnType == 'sonEdit') {
            let editObj = {
              pid: this.itemInfo.parentId,
              id: this.itemInfo.key,
              name: this.dictForm.content,
            }
            classDictEditApi(editObj).then((res) => {
              if (res.code == 200) {
                this.getData()
              } else {
                this.$antdMessage.warning(res.message)
              }
            })
          }
          this.showDialog = false
        } else {
          return false
        }
      })
    },

    openItem(fatherIndex) {
      this.treeData[fatherIndex].showChildren = true
      this.$forceUpdate()
    },
    closeItem(fatherIndex) {
      this.treeData[fatherIndex].showChildren = false
      this.$forceUpdate()
    },
  },
}
</script>
<style lang='less' scoped>
@import '~@/assets/less/public.less';
.wrap {
  background: #ffffff;
  width: 100%;
  .add {
    color: #1890ff;
  }
}
.wrap p {
  margin: 0;
}
/* 列表 */
.scrollBox {
  height: calc(100vh - 280px);
  overflow: auto;
}
.subBox {
  box-sizing: border-box;
  padding: 0 16px;
  background: #ffffff;
  margin-bottom: 10px;
  .itemBox {
    box-sizing: border-box;
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    .itemLeft {
      font-size: 15px;
      color: #333333;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .fatherDrag,
      .sonDrag {
        width: 27px;
        height: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-right: 10px;
        .dragPng {
          width: 15px;
          height: 15px;
          cursor: move;
        }
      }
      .dragPng {
        width: 15px;
        height: 15px;
        cursor: move;
      }

      .itemName {
        // margin-left:  0.12rem;
      }
      .proBox {
        width: 13px;
        height: 13px;
        // background-color: red;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        .opnePng {
          width: 13px;
          height: 13px;
          cursor: pointer;
        }
        .closePng {
          width: 13px;
          height: 13px;
          cursor: pointer;
        }
      }
    }

    .deletePng {
      width: 15px;
      height: 15px;
    }
  }
  .itemBox2 {
    padding-left: 60px;
  }
}
.flip-list-move {
  transition: transform 0.5s;
}
.chosen {
  border: solid 2px #3089dc !important;
}
.no-move {
  transition: transform 0s;
}
.btnBox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
.natiueHeader {
  width: 100%;
  height: 44px;
  background: #f4f5f6;
  box-sizing: border-box;
  padding: 0 140px 0 54px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .headerLeft {
    font-size: 14px;
    color: #444444;
  }
  .headerRight {
    font-size: 14px;
    color: #444444;
  }
}
.actionBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 152px;
  .middleLine {
    width: 1px;
    height: 12px;
    background: #eeeeee;
    margin: 0 8px;
  }
}
/deep/.ant-form-item {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  .ant-form-item-label {
    width: 90px;
    text-align: left;
    &::after {
      content: ':';
    }
  }
}
</style>
